<template>
  <div>
    <ul class="cate-box">
      <li
        v-for="item in cateList" :key="item.id"
        class="cate-list">
        <img class="cate-img" :src="item.img" alt="">
        <p class="cate-title">{{item.name}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
import { getCategory } from '../../api/home.js'
export default {
  data () {
    return {
      cateList: []
    }
  },
  async created () {
    const res = await getCategory()
    this.cateList = res.data
  }
}
</script>
<style lang="scss" scoped>
.cate-box {
  display: flex;
  flex-wrap: wrap;
  .cate-list {
    width: 20%;
    text-align: center;
    padding-top: .3rem;
    font-size: 11px;
    .cate-img {
      width: .88rem;
      height: .88rem;
      margin-bottom: .1rem;
    }
  }
}
</style>
